<template>
        <!-- border 是否显示外边框-->
        <!-- center 属性可以让 Cell 的左右内容都垂直居中 -->
        <!-- is-link 是否展示右侧箭头(这里主要就是为了显示箭头)并开启点击反馈 -->
        <!-- value:右侧文本 -->
        <!-- title插槽,左侧内容 -->
        <!-- 这里右侧基本是数字,左侧则是字体图标和页面的介绍 -->
        <van-cell
        @click="$emit('click')"
        center
        :border="false"
        class="mm-cell "
        :value="value"
        is-link
      >
        <template #title>
          <!-- 如果不传icon值,则不显示这个元素,所有需要传值的都用动态属性
          这之中的value 和 class 都是需要传值的,改成动态的,否则她就是一个字符串 -->
          <i v-if="icon" :class="`iconfont ${icon}`"></i>
          <span class="custom-title">{{title}}</span>
        </template>
        <template>
          <!-- 这里传入一个插槽,目的就是为了接受父组件传递过来的结构,就是一个头像的
          HTML结构,这个如果不传就不会显示, -->
          <slot></slot>
        </template>
      </van-cell>
</template>

<script>
export default {
  name: 'mm-cell',
  props: ['value', 'icon', 'title']
}
</script>

<style lang='less'>
// 2个类名 可以提高样式的权重比
.van-cell.mm-cell {
// .mm-cell {
  // position: absolute;
  // top: -36px;
  height: 55px;
  width: 345px;
  .iconfont {
    margin-right: 12px;
  }
}
</style>
